<template>
  <div class="box">
  <div class="san">
    <el-popover placement="right" trigger="hover" :width="90" content="制作卡片">
    <template #reference>
      <div class="san-box"><img src="../assets/卡片.png" alt="" class="icon" @click="centerDialogVisible = true"></div>
    </template>
  </el-popover>
  <el-dialog v-model="centerDialogVisible" width="30%" center title="制作卡片" :draggable="true" :modal="false" :close-on-click-modal = "true">
    <el-form :model="cardForm">
      <el-form-item label="主题" prop="question">
        <el-input placeholder="主题" v-model="cardForm.card_question"></el-input>
      </el-form-item>
      <el-form-item label="想法" prop="answer">
        <el-input type="textarea" placeholder="这一刻的想法..."
        style="width: 295px"
        autosize v-model="cardForm.card_answer"></el-input>
      </el-form-item>
      <el-form-item label="相关" prop="text">
        <el-input type="textarea" placeholder="相关内容"
        :value="relative"
        style="width: 295px"
        autosize v-model="cardForm.card_text"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">收起</el-button>
        <el-button type="primary" @click="writeCard">完成</el-button>
      </span>
    </template>
  </el-dialog>
  <el-popover placement="right" trigger="hover" :width="70" content="浏览量">
    <template #reference>
    <div class="san-box"><img src="../assets/浏览量.png" alt="" class="icon">{{ news.news_views }}</div>
  </template>
  </el-popover>
    <div class="san-box">
      <el-popover placement="right" trigger="hover" :width="60" content="点赞">
        <template #reference>
          <img v-if="likeStatus===0" src="../assets/点赞.png" alt="" class="icon"   @click="likeUp">
        </template>
      </el-popover>
      <el-popover placement="right" trigger="hover" :width="90" content="取消点赞">
        <template #reference>
          <img v-if="likeStatus===1" src="../assets/已点赞.png" alt="" class="icon"   @click="likeDown">
        </template>
      </el-popover>
      {{ news.news_likes }}</div>
    <div class="san-box">
    <el-popover placement="right" trigger="hover" :width="60" content="收藏">
      <template #reference>
        <img v-if="collectStatus===0" src="../assets/收藏.png" alt="" class="icon" @click="collectUp">
      </template>
    </el-popover>
    <el-popover placement="right" trigger="hover" :width="90" content="取消收藏">
      <template #reference>
        <img v-if="collectStatus===1" src="../assets/已收藏.png" alt="" class="icon" @click="collectDown">
      </template>
    </el-popover>
      {{ news.news_collect }}</div>
  </div>
  <div class="news-box">
    <h1 class="title">{{ news.news_title }}</h1>
    <div class="date">{{ news.news_date }}</div>
    <div class="picture-box"><img class="picture" :src=news.news_picture alt=""></div>
    <div class="content" @mouseup="mouseSelect">{{ news.news_content }}</div>
    <div class="author">{{ news.news_author }}</div>
  </div>
  <el-form class="comment-box">
    <el-divider></el-divider>
    <div class="comment">评论({{ news.news_comments }})</div>
    <el-form-item>
      <div><el-avatar :size="40" class="tou" :src="require('../assets/avatar/'+userId+'.jpg')"></el-avatar></div>
      <div><el-input class="comment-write" type="textarea" style="width: 480px" placeholder="写评论" v-model="comment"></el-input></div>
      <div><el-button class="comment-btn" type="submit" @click="write">发表</el-button></div>
    </el-form-item>
  </el-form>
  <div class="comment-content">
    <div class="comment-content-box" v-for="(comment,index) of commentList" :key="index">
      <div @click="visit(pictureList[index].user_id)"><el-avatar :size="40" :src="require('../assets/avatar/'+pictureList[index].user_id+'.jpg')" class="tou2"></el-avatar></div>
      <div class="comment-date">{{pictureList[index].user_email}}&emsp;{{ comment.comment_date }}</div>
      <div class="content-box">{{ comment.comment_content }}</div>
    </div>
  </div>
</div>
<div class="hotlist">
  <div><img src="../assets/hotlist.png" class="hotimg" alt=""></div>
  <div v-for="(news,index) of newsList" :key="index" class="rank" :class="{visited:isvisited===news.news_id}"
  @mouseover="isvisited=news.news_id" @mouseout="isvisited=null" @click="getDetail(news.news_id)">
  <i class="num">{{ index+1 }}</i>{{news.news_title}}</div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'NewDetailView',
  setup () {
    const route = useRoute()
    const news:any = ref(null)
    const comment = ref('')
    const commentList:any = ref(null)
    const pictureList:any = ref(null)
    const newsList:any = ref(null)
    const newId = route.query.news_id
    const userId = sessionStorage.getItem('userId')
    const likeStatus = ref(0)
    const collectStatus = ref(0)
    const centerDialogVisible = ref(false)
    const router = useRouter()
    const isvisited = ref(null)
    const relative:any = ref('')
    const cardForm = reactive({
      card_question: '',
      card_answer: '',
      user_id: userId,
      news_id: newId,
      card_text: relative
    })
    const getNew = () => {
      axios.get('http://localhost:8081/getNew/' + newId).then(res => {
        if (res != null) {
          news.value = res.data
        } else { ElMessage.success('获取资源失败') }
      }).catch(error => {
        console.log(error)
      })
    }

    const mouseSelect = () => {
      centerDialogVisible.value = true
      relative.value = window.getSelection()?.toString()
      cardForm.card_text = relative
    }
    const write = () => {
      if (userId != null) {
        if (comment.value === '') {
          ElMessage.warning('请输入完整的评论')
        } else {
          axios.post('http://localhost:8081/addComment', { user_id: userId, news_id: newId, comment_content: comment.value }).then(res => {
            if (res.data === 'success') {
              comment.value = ''
              location.reload()
              ElMessage.success('发表成功')
            } else { ElMessage.error('服务繁忙') }
          }).catch(error => {
            console.log(error)
          })
        }
      } else {
        ElMessage.warning('你还未登陆，请先登陆')
      }
    }
    const getComment = () => {
      axios.post('http://localhost:8081/getComment', { news_id: newId }).then(res => {
        if (res.data != null) {
          commentList.value = res.data
          console.log(commentList.value[1])
        } else { ElMessage.error('获取评论失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    const getPicture = () => {
      axios.post('http://localhost:8081/getPicture', { news_id: newId }).then(res => {
        if (res.data != null) {
          pictureList.value = res.data
        } else { ElMessage.error('获取头像失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    const upadteViews = () => {
      axios.post('http://localhost:8081/updateViews', { news_id: newId }).then(res => {
        if (res.data === 'success') {
          console.log('viewUpdate')
        } else { console.log('viewUpdateError') }
      }).catch(error => {
        console.log(error)
      })
    }
    const getLike = () => {
      axios.post('http://localhost:8081/like', { news_id: newId, user_id: userId }).then(res => {
        if (res.data === 'exist') {
          likeStatus.value = 1
        } else if (res.data === 'null') {
          likeStatus.value = 0
        } else { console.log('likeError') }
      }).catch(error => {
        console.log(error)
      })
    }
    const likeUp = () => {
      if (sessionStorage.getItem('user') === null) {
        ElMessage.warning('您还未登陆，请先登陆')
      } else {
        axios.post('http://localhost:8081/likeUp', { news_id: newId, user_id: userId }).then(res => {
          if (res.data === 'ok') {
            likeStatus.value = 1
            news.value.news_likes++
          } else { console.log('likeError') }
        }).catch(error => {
          console.log(error)
        })
      }
    }
    const likeDown = () => {
      if (sessionStorage.getItem('user') === null) {
        ElMessage.warning('您还未登陆，请先登陆')
      } else {
        axios.post('http://localhost:8081/likeDown', { news_id: newId, user_id: userId }).then(res => {
          if (res.data === 'ok') {
            likeStatus.value = 0
            news.value.news_likes--
          } else { console.log('likeError') }
        }).catch(error => {
          console.log(error)
        })
      }
    }
    const getCollect = () => {
      axios.post('http://localhost:8081/collect', { news_id: newId, user_id: userId }).then(res => {
        if (res.data === 'existed') {
          collectStatus.value = 1
        } else if (res.data === 'null') {
          collectStatus.value = 0
        } else { console.log('collectError') }
      }).catch(error => {
        console.log(error)
      })
    }
    const collectUp = () => {
      if (sessionStorage.getItem('user') === null) {
        ElMessage.warning('您还未登陆，请先登陆')
      } else {
        axios.post('http://localhost:8081/collectUp', { news_id: newId, user_id: userId }).then(res => {
          if (res.data === 'ok') {
            collectStatus.value = 1
            news.value.news_collect++
          } else { console.log('collectError') }
        }).catch(error => {
          console.log(error)
        })
      }
    }
    const collectDown = () => {
      if (sessionStorage.getItem('user') === null) {
        ElMessage.warning('您还未登陆，请先登陆')
      } else {
        axios.post('http://localhost:8081/collectDown', { news_id: newId, user_id: userId }).then(res => {
          if (res.data === 'ok') {
            collectStatus.value = 0
            news.value.news_collect--
          } else { console.log('collectError') }
        }).catch(error => {
          console.log(error)
        })
      }
    }
    const writeCard = () => {
      if (sessionStorage.getItem('user') === null) {
        ElMessage.warning('您还未登陆，请先登陆')
      } else
      if (cardForm.card_answer === '' || cardForm.card_question === '') {
        ElMessage.error('请填写完整内容')
      } else {
        axios.post('http://localhost:8081/makeCard', cardForm).then(res => {
          if (res.data !== null) {
            centerDialogVisible.value = false
            cardForm.card_answer = ''
            cardForm.card_question = ''
            cardForm.card_text = ''
            ElMessage.success('制卡成功')
          } else { ElMessage.success('服务器繁忙') }
        }).catch(error => {
          console.log(error)
        })
      }
    }
    const visit = (item:any) => {
      router.push({ name: 'visit', query: { usId: item } })
    }
    const getHot = () => {
      axios.get('http://localhost:8081/hotlist').then(res => {
        if (res != null) {
          newsList.value = res.data
        } else { ElMessage.success('获取资源失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    const getDetail = (item:any) => {
      router.push({ path: 'newDetail', query: { news_id: item } })
    }
    getHot()
    getCollect()
    getLike()
    upadteViews()
    getNew()
    getComment()
    getPicture()
    return {
      news,
      comment,
      write,
      commentList,
      scroll,
      pictureList,
      likeUp,
      likeStatus,
      collectStatus,
      likeDown,
      collectUp,
      collectDown,
      centerDialogVisible,
      cardForm,
      writeCard,
      visit,
      newsList,
      isvisited,
      getDetail,
      userId,
      mouseSelect,
      relative
    }
  }
})
</script>
<style scoped>
.box{
  z-index: 10;
}
.news-box{
  position: relative;
  margin-top: 100px;
  margin-left: 200px;
  margin-right: 140px;
  width: 600px;
}
.title{
  text-align: left;
  margin-bottom: 40px;
}
.date{
  text-align: left;
  color: gray;
  font-size: small;
  margin-bottom: 30px;
}
.picture-box{
  text-align: left;
}
.picture{
  margin-bottom: 20px;
  height: 300px;
  width: 600px;
}
.content{
  text-align: left;
  white-space: normal;
  word-break: break-all;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  margin-bottom: 60px;
}
.author{
  text-align: left;
  color: gray;
  font-size: small;
}
.comment-box{
  margin-top: 30px;
  margin-left: 200px;
  margin-right: 140px;
  width: 600px;
}
.comment{
  text-align: left;
  font-weight: bolder;
  margin-bottom: 20px;
}
.tou{
  float:left;
}
.comment-write{
  margin-left: 10px;
  top: -5px;
  position: absolute;
}
.comment-btn{
  border-radius: 0%;
  top: 15px;
  right: 0px;
  color: #409EFF;
  position: absolute;
}
.comment-content{
  margin-top: 40px;
}
.comment-content-box{
  margin-left: 200px;
  margin-right: 140px;
  height: auto;
  width: 600px;
}
.tou2{
  float:left;
}
.comment-date{
  color: gray;
  font-size: small;
  text-align: left;
  margin-left: 20px;
  float: left;
  margin-top: 5px;
}
.content-box{
  float:left;
  margin-left: 20px;
  text-align: left;
  width: 540px;
  margin-bottom: 20px;
}
.san{
  float: left;
  z-index: 10;
  position: fixed;
  bottom: 100px;
  left: 50px;
  height: auto;
  width: 45px;
  box-shadow: rgba(136, 165, 191, 0.48) -6px -2px 16px 0px, rgba(255, 255, 255, 0.8) 6px 2px 16px 0px;
  cursor: pointer;
  padding: 5px;
}
.icon{
  height: 40px;
  width: 40px;
  margin-top: 10px;
}
.hotlist{
  position: absolute;
  right: 70px;
  top: 100px;
  width: 20%;
  height: auto;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
  padding: 20px;
}
.hotimg{
  height: 80px;
  width: 200px;
  margin-bottom: 20px;
}
.rank{
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
}
.visited{
  font-weight: bolder;
}
.num{
  color: rgb(219, 48, 44);
  margin-right: 10px;
  font-size: 20px;
}
</style>
<style>
.el-popover{
  min-width: auto !important;
}
.el-dialog__wrapper{
  position: absolute !important;
  z-index: 10 !important;
}
.v-modal{
  position: absolute !important;
}
</style>
